<template>
    <div id="login" class="login-container">
         <div class="logo">
            <!-- <a class="logo-link" href="javasrcipt:void(0)"><img src="@/assets/img/dectop-logo.png" alt=""></a> -->
        </div>
        <!-- form -->
        <el-form class="login-form" :model="loginForm" :rules="rules" ref="loginForm">
            <div class="login-form-hd">登录</div>
            <div class="login-form-bd">
                <div class="login-form-tips">输入您的帐号、密码登录</div>
                <el-form-item >
                    <el-input name="username" type="text" v-model="loginForm.username" auto-complete='off' placeholder="手机号/用户名/邮箱" />
                </el-form-item>
                <el-form-item >
                    <el-input name="password" :type="pwdType" v-model="loginForm.password" auto-complete='off' placeholder="输入密码" />
                        <span class="pwdEye" @click="passwordToggle"><i :class="eyeType"></i>
                    </span>
                </el-form-item>
                <!-- <el-form-item prop="key">
                    <el-input name="command" type="text" v-model="form.key"  @keyup.enter.native="login('form')" auto-complete='off' placeholder="登录口令" />
                </el-form-item>    -->
                <el-button type="primary" class="login-form-btn" :loading="loading" @click.native.prevent="handleLogin('form')">登录</el-button>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="12"><div class="login-form-desc">忘记了密码？</div></el-col>
                </el-row>
            </div>
        </el-form>

      <!-- ripple -->
        <div class="ripple left">
            <i class="r1"></i>
            <i class="r2"></i>
            <i class="r3"></i>
            <i class="r4"></i>
            <i class="r5"></i>
        </div>
        <div class="ripple right">
            <i class="r1"></i>
            <i class="r2"></i>
            <i class="r3"></i>
            <i class="r4"></i>
            <i class="r5"></i>
        </div>
  </div>
</template>

<script>
export default {
  data () {
    const validateUsername = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
    return {
       pwdType: 'password',
       eyeType: 'el-icon-view',
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
    rules: {
            // name: [
            //     { required: true, message: '请输入手机号/用户名/邮箱', trigger: 'blur' },
            //     { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
            // ],
            // pwd: [
            //     { required: true, message: '请输入密码', trigger: 'blur' }
            // ],
            // key: [
            //     { required: true, message: '请输入登录口令', trigger: 'blur' }
            // ]
        },
      loading: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created () {
    // window.addEventListener('hashchange', this.afterQRScan)
  },
  destroyed () {
    // window.removeEventListener('hashchange', this.afterQRScan)
  },
  methods: {
    handleLogin () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: '/' })
          }).catch((res) => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    passwordToggle() {
            if (this.pwdType === 'password') {
                this.pwdType = ''
                this.eyeType = 'el-icon-view'
            } else {
                this.pwdType = 'password'
                this.eyeType = 'el-icon-setting'
            }
        }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/css/mixins.less';
#login {
    position: fixed;
    height: 100%;
    min-height: 100%;
    width: 100%;
    overflow: hidden;
    .login-form {
        max-width: 500px;
        margin: 10% auto;
        padding: 30px 0;
        width: 100%;
        background: @white;
        box-shadow: 0 0 20px rgba(0,0,0,.08), inset 0 0 3px @white;
        padding: 20px;
        border-radius: 4px;
        &-hd {
            border-bottom: solid 1px #eaeaea;
            padding-bottom: 13px;
            position: relative;
            font-size: @fs + 8;
            color: #4d5250;
            letter-spacing: 2px;
            padding-left: 10px;
        }
        &-bd {
            margin-top: 5px;
            padding: 20px 20px 0
        }
        &-tips {
            font-size: @fs + 1;
            line-height: 180%;
            color: #c1c1c1;
            margin-bottom: 20px;
        }
        &-btn {
            width: 100%;
            margin-bottom: 15px;
        }
        &-desc {
            text-align: right;
        }
        .el-form-item {
            margin-bottom: 20px;
        }
        .pwdEye {
            position: absolute;
            right: 10px;
            top: 0;
            font-size: @fs + 2;
            user-select: none;
            cursor: pointer;
        }
    }
}
.ripple{
    position: absolute;
    & > i {
        border: 1px solid #fff;
        position: absolute;
        border-bottom: 0;
        border-radius: 50%;
        opacity: 0;
        animation: ripple 10s infinite ease-out;
    }
    &.left{
        width: 800px;
        height: 800px;
        bottom: -750px;
        left: 50px;
        & > i {
            width: 200px;
            height: 200px;
        }
    }
    &.right{
        width: 100px;
        height: 100px;
        top: 25%;
        right: -50px;
        & > i {
            width: 100px;
            height: 100px;
        }
    }
    .r2{
        animation-delay: 2s;
    }
    .r3{
        animation-delay: 4s;
    }
    .r4{
        animation-delay: 6s;
    }
    .r5{
        animation-delay: 8s;
    }
}
.login-container {
    overflow-y: auto;
    background-image: url(~@/assets/img//signup-bg.png);
    background-size: cover;
    background-position: left center;
    .logo {
        margin: 30px auto 0 auto;
        text-align: center;
        &-link {
            .inline-block();
            height: 50px;
            margin-bottom: 15px;
        }
    }
}
@keyframes ripple{
    0% {
        opacity: .4;
    }
    100% {
        opacity: 0;
        transform: scale(4,4);
    }
}
</style>
